<template>
	<view class="wapper">
		<view class="form-con">
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					船舶名称
				</view>
				<view class="value" @click="showOli = true">
					<text :class="form.boatName?'text':''"> {{form.boatName || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					维修类型
				</view>
				<view class="value" @click="showFixType = true">
					<text :class="form.fixTypeName?'text':''"> {{form.fixTypeName || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					维修项目(多选)
				</view>
				<view class="value" @click="showFixPro = true">
					<text :class="projectInfo?'text':''"> {{projectInfo || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list-none">
				<view class="name">
					维修备注
				</view>
			</view>
			<view class="text-area">
				<textarea v-model="form.remark" placeholder="请输入（非必填）"></textarea>
			</view>
		</view>
		<view class="footer" @click="newSubmit">
			提交
		</view>
		<u-action-sheet :safeAreaInsetBottom="true" @select="selectClick" title="请选择维修类型" @close="showFixType = false"
			:actions="fixTypeOption" :show="showFixType">
		</u-action-sheet>
		<changeBoat @closeOli="closeOli" @changeItem="changeItem" :showOli="showOli"></changeBoat>
		<changeFixProject @closeFix="closeFix" :checkboxValue="form.fixProjectIdList" @closeModal="closeModal" @changeItem="changeFixItem"
			:showFixPro="showFixPro"></changeFixProject>
	</view>
</template>

<script>
	import changeBoat from '@/components/changeBoat/index.vue'
	import changeFixProject from '@/components/changeFixProject/index.vue'
	import {
		addWorkOrderList
	}
	from '@/api/repair.js'
	export default {
		components: {
			changeBoat,
			changeFixProject
		},
		data() {
			return {
				showOli: false,
				showFixType: false,
				showFixPro: false,
				fixTypeOption: [{
						name: '修理班修',
						type: '1'
					},
					{
						name: '外修',
						type: '2'
					}
				],
				projectInfo: '',
				allProjectList: [],
				checkProject: [],
				open: false,
				search: '',
				// 表单参数
				form: {
					fixType: 1,
					boatId: '',
					fixProjectIdList: [],
					boatName: '',
					fixTypeName: '',
					remark: ''
				},
				// 表单校验
				rules: {
					boatId: [{
						required: true,
						message: '请选择船舶名称',
						trigger: 'change'
					}],
					fixType: [{
						required: true,
						message: '请选择维修类型',
						trigger: 'change'
					}],
					fixProjectIdList: [{
						required: true,
						message: '请添加维修项目',
						trigger: 'change'
					}]
				},
				loading: false
			}
		},
		created() {

		},
		methods: {

			closeOli() {

				this.showOli = false
			},
			changeItem(item) {
				this.form.boatId = item.boatId
				this.form.boatName = item.boatName
				this.showOli = false
			},
			selectClick(item) {
				this.form.fixType = item.type
				this.form.fixTypeName = item.name
				this.showFixType = false
			},
			closeFix(fixProjectName, fixProjectIdList) {
				this.showFixPro = false
				this.projectInfo = fixProjectName
				this.form.fixProjectIdList = fixProjectIdList
			},
			closeModal() {
				this.showFixPro = false
			},
			changeFixItem(item) {
				// this.form.boatId = item.boatId
				// this.form.boatName = item.boatName
				this.showFixPro = false
			},
			getDetail() {
				const id = this.id
				getWorkOrderDetail({
					id
				}).then(response => {
					this.form = response.data
				})
			},




			/** 提交按钮 */
			newSubmit() {

				if (!this.form.boatId) {
					uni.showToast({
						icon: 'none',
						title: '请选择船舶',
						duration: 3000,
					})
					return
				}
				if (!this.form.fixTypeName) {
					uni.showToast({
						icon: 'none',
						title: '请选择维修类型',
						duration: 3000,
					})
					return
				}
				if (!this.form.fixProjectIdList) {
					uni.showToast({
						icon: 'none',
						title: '请选择维修项目',
						duration: 3000,
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				if (this.id) {
					updateWorkOrderList(this.form).then(response => {
						if (response.code === 200) {
							uni.showToast({
								icon: 'none',
								title: '修改成功',
								mask: true,
								duration: 2000,
							})
							setTimeout(() => {
								uni.hideLoading()
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.hideLoading()
						}


					}).finally(() => {

					})
				} else {
					addWorkOrderList(this.form).then(response => {
						if (response.code === 200) {
							uni.showToast({
								icon: 'none',
								title: '新增成功',
								mask: true,
								duration: 2000,
							})
							setTimeout(() => {
								uni.hideLoading()
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.hideLoading()
						}


					}).finally(() => {

					})
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;
		overflow: hidden;


		.form-con {
			margin-top: 10rpx;
			background: #fff;

			.item-list-none {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: 400;
				}

			}

			.text-area {
				margin: 0 30rpx;

				textarea {
					width: 100%;
				}
			}

			.item-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #F5F7F9;

				.name {
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 20rpx;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					width: 400rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #333;
					}
				}
			}
		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 118rpx;
			left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;

		}
	}
</style>
